import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, Menu, Spin, Modal } from 'antd';

import React, { useState } from 'react';
import { history, connect } from 'umi';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
import { getDefaultAvatarUrl } from '@/utils/default'


class AvatarDropdown extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      ...props,
    }

  }

  onMenuClick = (event) => {
    const { key } = event;
    if (key === 'enterprise') {
      history.push("/")
      return;
    }
    if (key === 'logout') {
      const { dispatch } = this.props;
      if (dispatch) {
        dispatch({
          type: 'oauth/logout',
        });
      }
    } else  if (key === 'settings') {
      history.push(`/home/settings`);
    } else if (key === 'center'){
        history.push(`/home/center`);
    }
  };

  render() {

    const {
      myInfo = {
        avatarUrl: '',
        name: '',
      },
      menu,
      currentEnterprise = {},
      userEnterpriseList = [],
    } = this.props;


    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        <Menu.Item key="enterprise">
          <span className={styles.enterpriseName}>
            {currentEnterprise.enterprise && currentEnterprise.enterprise.name}
          </span>
        </Menu.Item>
        <Menu.Divider />
        {menu && (
          <Menu.Item key="center">
            <UserOutlined />
            我的主页
          </Menu.Item>
        )}
        {menu && (
          <Menu.Item key="settings">
            <SettingOutlined />
            设置
          </Menu.Item>
        )}
        {menu && <Menu.Divider />}

        <Menu.Item key="logout">
          <LogoutOutlined />
          退出登录
        </Menu.Item>
      </Menu>
    );

    return myInfo && myInfo.id ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          {myInfo.avatarUrl ? <Avatar className={styles.avatar} src={myInfo.avatarUrl} alt="avatar" /> :
            <Avatar
              className={styles.avatar}
              alt="avatar" src={getDefaultAvatarUrl(myInfo.id)} >
            </Avatar>
          }
          <span className={`${styles.name} anticon`}>{myInfo.nickName || myInfo.username}</span>
          
        </span>
      </HeaderDropdown>
    ) : (
        <span className={`${styles.action} ${styles.account}`}>
          <Spin
            size="small"
            style={{
              marginLeft: 8,
              marginRight: 8,
            }}
          />

        </span>
      );
  }
}

export default connect(({ user, enterprise }) => ({
  myInfo: user.myInfo,
  currentEnterprise: enterprise.currentEnterprise,
}))(AvatarDropdown);
